<template>
  <van-tabbar v-model="active" active-color="#41b883" @change="tabChange" v-show="hideBar">
    <van-tabbar-item icon="diamond" to="/">首页</van-tabbar-item>
    <van-tabbar-item icon="wap-nav" to="/category">分类</van-tabbar-item>
    <van-tabbar-item icon="column" to="/bookshop">书城</van-tabbar-item>
    <van-tabbar-item icon="bag" :info="cartCount" to="/cart">购物车</van-tabbar-item>
    <van-tabbar-item icon="manager" info="20" to="/users">个人中心</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'THeader',
  data() {
    return {
      active: 0
    }
  },
  props: {
  },
  methods: {
    ...mapMutations(['changeTabName']),
    tabChange(active) {
      console.log(active)
      this.changeTabName(active)
    }
  },
  computed: {
    ...mapState(['hideBar', 'cartCount'])

  }
}
</script>

<style scoped lang='stylus'>
</style>
